<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图库</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/style2.css">
    <link href="/css/boxicons.min.css" rel="stylesheet">
    <script src="js/anime.min.js" type="text/javascript"></script>
    <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
    <style>
        /* 小屏幕手机端 */
        @media (min-width: 0px) and (max-width:768px) {
            .header {
                width: 100%;
                height: 55px;
            }

            .content {
                width: 100%;
                height: 130px;
                background-color: #e6e5e5;
            }

            .list {
                width: 100%;
                height: 475px;
                background-color: #e6e5e5;
            }

            .foot {
                width: 100%;
            }

            .comeback {
                height: 350px;
            }
        }

        /* 中等屏幕（桌面显示器，大于等于 992px） */
        @media (min-width: 768px) and (max-width:992px) {
            .header {
                width: 100%;
                height: 110px;
            }

            .nav .search input {
                width: 750px;
                height: 40px;
            }

            .nav .search button {
                width: 80px;
                height: 50px;
            }

            .content {
                width: 100%;
                height: 130px;
                background-color: #e6e5e5;
            }

            .list {
                width: 100%;
                height: 920px;
                background-color: #e6e5e5;
            }

            ._list {
                height: 880px;
            }

            .foot {
                width: 100%;
            }

            .comeback {
                height: 300px;
            }
        }

        /* 大屏幕（大桌面显示器，大于等于 1200px） */
        @media (min-width: 992px) {
            .header {
                width: 100%;
                height: 85px;
                background-color: rgb(49, 49, 50);
            }
        }
    </style>
</head>

<body style="background-color: black;">
    <div>
        <!-- 预览 -->
        <div class="list">
            <div class="_list">
                <div class="list_img">
                    <img class="bigimg" src="./images/夜郎王·多筒.png" width="100%" />
                </div>
                <div class="list_info">
                    <div>
                        <span class="spanName" style="font-size: 17px;font-weight: 700;color: white;">夜郎王·多筒</span>
                        <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                    </div>
                    <div class="listinfo_bottom">
                        <div>
                            <img src="./images/头像.png" />
                            <span style="color: white;">w</span>
                            <span class="spanName"
                                style="font-size: 10px;color: green;border: 1px solid green;padding: 2px;">夜郎王·多筒</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="zj" style="width: 95%;
        height: 90px;
        margin: auto;
        background-color: white;
        border-radius: 15px;">
            <div style="padding: 10px 20px 10px 20px;font-weight: 800;">
                <div>
                    <span style="color: black;font-weight: 800;font-size: 20px;">所属专辑</span>
                </div>
                <div>
                    <span style="color: darkgrey;">专辑名称：</span>
                    <span>夜郎王·多筒</span>
                </div>
                <div>
                    <span style="color: darkgrey;">作者：</span>
                    <span>W</span>
                </div>
            </div>
        </div>
        <div class="comeback" style="width: 95%;
        margin: auto;
        background-color: white;
        border-radius: 15px;margin-top: 10px;">
            <div style="padding: 10px 20px 10px 20px;font-weight: 800;">
                <div>
                    <span style="color: black;font-weight: 800;font-size: 20px;">创作者介绍</span>
                </div>
                <div>
                    <img style="width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    border: 1px solid #fff;" src="./images/头像.png" />
                    <span>w</span>
                    <span class="spanName"
                        style="font-size: 10px;color: green;border: 1px solid green;padding: 2px;">创作者</span>
                </div>
                <div>
                    <span style="font-size: 14px;font-weight: 500;">
                        &nbsp; &nbsp;插画师，建模师，AI创作爱好者，擅长各种艺术作品创作。
                    </span>
                </div>
            </div>
            <div style="padding: 10px 20px 20px 20px;font-weight: 800;">
                <div>
                    <span style="color: black;font-weight: 800;font-size: 20px;">作品解读</span>
                </div>
                <div>
                    <span style="font-size: 14px;font-weight: 500;">
                        &nbsp;
                        &nbsp;很多时候，绘画就是造型学科，经过专业学习的人，才会熟练地掌握这门技巧。但是同样一个事物，每个人都会描绘出不同的样子，或者层次。能将事物理解、刻画到什么层次，是画家层次高低之分的重要参考依据。
                    </span>
                </div>
            </div>
            <div style="height: 80px; background-color: black;padding: 10px 20px 10px 0px;font-weight: 800;">
                <div style="float: left;">
                    <a href="./index.html"><img height="30px" src="./images/返回.jpg"><span
                            style="line-height: -20px;color: white;font-size: 20px; font-weight: 800;">返回</span></a>
                    <!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
                </div>
                <div id="obtain" style="float: right;">
                    <a class="obtainbtn" href="#"><img height="30px"><span
                            style="line-height: -20px;color: white;font-size: 20px; font-weight: 800;">获取</span></a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var loc = window.location.href;
            var param = loc.split("?")[1];
            var paramList = param.split("&");
            var key, val;
            for (index in paramList) {
                key = paramList[index].split("=")[0];
                val = paramList[index].split("=")[1];
                val = decodeURI(val, "UTF8");
                $('#obtain').bind('click', function () {
                    $('.obtainbtn').attr('href', './home.html?id=' + val);
                })
                if (val == '1') {
                    $('.bigimg').attr("src", "./images/夜郎王·多筒.png");
                    $('.spanName').text("夜郎王·多筒");
                    $('.bigimg').attr("height", "1100px");
                }
                if (val == '2') {
                    $('.bigimg').attr("src", "./images/女王1.png");
                    $('.spanName').text("女王");
                }
                if (val == '3') {
                    $('.bigimg').attr("src", "./images/二大王·上峒叉星蛮王 (2).jpg");
                    $('.spanName').text("二大王·上峒叉星蛮王");
                }
                if (val == '4') {
                    $('.bigimg').attr("src", "./images/三大王·中峒蛇星蛮王.jpg");
                    $('.spanName').text("三大王·中峒蛇星蛮王");
                }
                if (val == '5') {
                    $('.bigimg').attr("src", "./images/四大王·下峒獐星蛮王.jpg");
                    $('.spanName').text("四大王·下峒獐星蛮王");

                }
                if (val == '6') {
                    $('.bigimg').attr("src", "./images/古国遗珍.png");
                    $('.spanName').text("古国遗珍王");

                }
                if (val == '7') {
                    $('.bigimg').attr("src", "./images/静谧殿.png");
                    $('.spanName').text("静谧殿");

                }
                if (val == '8') {
                    $('.bigimg').attr("src", "./images/青瓦之宫.png");
                    $('.spanName').text("青瓦之宫");

                }
                if (val == '9') {
                    $('.bigimg').attr("src", "./images/夜郎民族图腾崇拜和权力的象征——铜虎.jpg");
                    $('.spanName').text("夜郎民族图腾崇拜和权力的象征——铜虎");

                }
                if (val == '10') {
                    $('.bigimg').attr("src", "./images/龙里巫山岩画“夜郎武士”.jpg");
                    $('.spanName').text("龙里巫山岩画“夜郎武士”");

                }
                if (val == '11') {
                    $('.bigimg').attr("src", "./images/盘县大洞旧石器时代遗址.jpg");
                    $('.spanName').text("盘县大洞旧石器时代遗址");

                }
                if (val == '12') {
                    $('.bigimg').attr("src", "./images/民间布艺中的夜郎神话.jpg");
                    $('.spanName').text("民间布艺中的夜郎神话");

                }
                if (val == '13') {
                    $('.bigimg').attr("src", "./images/夜郎文物 陶罐.jpg");
                    $('.spanName').text("夜郎文物:陶罐");

                }
                if (val == '14') {
                    $('.bigimg').attr("src", "./images/竹王面具.jpg");
                    $('.spanName').text("竹王面具");

                }
                if (val == '15') {
                    $('.bigimg').attr("src", "./images/夜郎竹王像.jpg");
                    $('.spanName').text("夜郎竹王像");

                }
            }
        });
    </script>
</body>

</html>